/* eslint-disable vue/no-dupe-keys */
/* eslint-disable vue/no-dupe-keys */
/* eslint-disable no-dupe-keys */
<template>
  <basic-container>
    <h4>基本信息</h4>
    <avue-form ref="form" :option="option1" @reset-change="emptytChange">
      <!-- 业务员 -->
      <template slot-scope="scope" slot="name">
        <el-select
          v-model="customerOrder.employeeId"
          filterable
          remote
          placeholder="请选择">
          <el-option v-for="item in teamList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </template>
      <!-- 用户名称 -->
      <template slot-scope="scope" slot="text">
        <select-customer-form
          :customer-obj="{customerName: customerOrder.customerName, customerSn: customerOrder.customerSn}"
          @changeCustomer="handleSelectCustomer"/>
      </template>
      <!-- 交货日期 -->
      <template slot-scope="scope" slot="date">
        <el-date-picker
          :editable="false"
          v-model="customerOrder.deliveryDate"
          class="fill-width"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd">
        </el-date-picker>
      </template>
      <!-- 销售单类型 -->
      <template slot-scope="scope" slot="type">
        <el-select
          v-model="customerOrder.salesType"
          placeholder="请选择">
          <el-option key="1" label="代客下单" value="1">
          </el-option>
          <el-option key="2" label="自主下单" value="2">
          </el-option>
        </el-select>
      </template>
      <!-- 收货地址 -->
      <template slot-scope="scope" slot="address">
        <el-select
          v-model="customerOrder.customerAddressId"
          placeholder="请选择">
          <el-option
            v-for="item in addressList"
            :key="item.id"
            :label="item.address"
            :value="item.id">
          </el-option>
        </el-select>
      </template>
      <!-- 备注 -->
      <template slot-scope="scope" slot="remark">
        <el-input
          v-model="customerOrder.remarks"
          type="textarea"
          placeholder="">
        </el-input>
      </template>
      <!-- 其他金额 -->
      <template slot-scope="scope" slot="number1">
        <el-input-number :min="0" v-model="customerOrder.otherAmount" :precision="2" class="fill-width" placeholder="请输入" @change="countPrice"></el-input-number>
      </template>
      <!-- 商品合计金额 -->
      <template slot-scope="scope" slot="number2">
        <el-input-number v-model="customerOrder.goodsTotalAmount" :precision="2" class="fill-width" placeholder="请输入" disabled @change="countPrice"></el-input-number>
      </template>
      <!-- 总计金额 -->
      <template slot-scope="scope" slot="number3">
        <el-input-number v-model="customerOrder.totalAmount" :precision="2" class="fill-width" placeholder="请输入" @change="countCouponAmount"></el-input-number>
      </template>
      <!-- 优惠金额 -->
      <template slot-scope="scope" slot="number4">
        <el-input-number v-model="customerOrder.couponAmount" :precision="2" disabled class="fill-width" placeholder="请输入"></el-input-number>
      </template>
    </avue-form>
    <goods-record :disable-record="true" :customer-id="customerOrder.customerSn" @addGoods="addGoods"/>
    <goods-table :goods-table="tableData" @change="changeTable"/>
    <el-row type="flex" style="margin-top:40px;" justify="center">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button type="primary" plain @click="close">返回</el-button>
    </el-row>
  </basic-container>
</template>

<script>
import { ordereditoption } from '../../const/crud/supply/ordereditoption'
import selectCustomerForm from '@/components/crm/select_customer_form'
import goodsTable from '../../crm/order_con/customerOrder/components/goodsTable.vue'
import goodsRecord from '../../crm/order_con/customerOrder/components/goodsRecord.vue'
import { fetchList as teamList } from '@/api/crm/marketemployee'
import { fetchList as address } from '@/api/crm/customeraddress'
import { editDetail } from '@/api/crm/salesorder'
function data() {
  return {
    // 商品列表表格配置
    option1: ordereditoption,
    teamList: [],
    customerOrder: {},
    disabled: true,
    // 收货地址列表
    addressList: [],
    orderList: this.orderListInfo(),
    tableData: []
  }
}
export default {
  components: {
    // 选择客户弹出框
    selectCustomerForm,
    goodsTable,
    goodsRecord
  },
  data: data,
  created() {
    this.marketemployeeList()
  },
  methods: {
    // 获取业务员列表
    marketemployeeList() {
      teamList({ current: 1, size: 100 }).then(response => {
        this.teamList = response.data.data.records
      })
    },
    // 订单列表信息
    orderListInfo() {
      return [{
        goodsModelId: '',
        salesGoodsType: '',
        goodsNum: '',
        buyPrice: '',
        remarks: ''
      }]
    },
    // 获取明天日期
    tomorrow() {
      return this.$utils.getDiffDate(1)
    },
    async handleSelectCustomer(customerObj) {
      if (this.customerOrder.customerSn === customerObj.customerSn) return
      this.$set(this.customerOrder, 'customerAddressId', '')
      this.$set(this.customerOrder, 'customerSn', customerObj.customerSn)
      this.$set(this.customerOrder, 'customerName', customerObj.customerName)
      this.changeAddress(customerObj.customerSn)
    },
    // 获取地址
    changeAddress(value) {
      address({ current: 1, size: 1000, customerSn: value }).then(response => {
        this.addressList = response.data.data.records
      })
      this.disabled = false
    },
    // 价格更新函数
    countPrice() {
      this.$set(this.customerOrder, 'totalAmount', this.getTotalAmount())
      this.countCouponAmount()
    },
    // 计算总价
    getTotalAmount() {
      let totalAmount = 0
      this.orderList.map(item => {
        totalAmount += parseFloat(item.goodsNum * item.buyPrice)
      })
      this.$set(this.customerOrder, 'goodsTotalAmount', totalAmount)
      totalAmount += this.customerOrder.otherAmount
      return totalAmount
    },
    // 计算优惠价格
    countCouponAmount() {
      const couponAmount = this.getTotalAmount() - this.customerOrder.totalAmount
      this.$set(this.customerOrder, 'couponAmount', couponAmount)
    },
    // 重置表单
    emptytChange() {
      this.customerOrder = {}
    },
    // 添加商品
    addGoods() {
      this.tableData.push(this.orderListInfo()[0])
    },
    orderListInfo() {
      return [{
        goodsModelId: '',
        salesGoodsType: '',
        goodsNum: '',
        buyPrice: '',
        remarks: ''
      }]
    },
    // 返回
    close() {
      this.$store.commit('DEL_ONE_TAG', this.$route)
      this.$router.push('supplyorder')
    },
    // 保存
    save() {
      const order = this.customerOrder
      if (order.customerAddressId === this.customerOrder.address) delete order.customerAddressId
      const detailList = []
      const saleList = [].concat(this.tableData)
      saleList.map(item => {
        if (!item.goodsNum) return this.$message.warning('请输入数量')
        if (!item.buyPrice && item.salesGoodsType !== '3') return this.$message.warning('请输入价格')
        detailList.push({
          goodsModelId: item.goodsId,
          salesGoodsType: item.salesGoodsType,
          goodsNum: item.goodsNum,
          dealPrice: item.salesGoodsType === '3' ? 0 : item.buyPrice,
          remarks: item.remarks })
      })
      order.detailList = detailList
      editDetail(order).then(res => {
        this.$message.success('编辑成功')
        const _this = this
        setTimeout(function() {
          _this.close()
        }, 2000)
      })
    },
    changeTable(data) {
      if (data) {
        this.tableData = data
        this.countPrice()
      }
    }
  }
}
</script>

<style lang="scss">
  .el-form-item__label {
    padding-right: 2px;
  }
</style>
